<template>
	<view class="pay">
		<!-- 收件人信息 -->
		<view class="rece" @click="gowhere('/pages/address/address')">
			<uni-icons type="person-filled" size="40" color="#868686"></uni-icons>
			<view class="rece-text">
				<text>姓名：{{adress.name}} </text>
				<text>电话：{{adress.tel}} </text>
			</view>
			<view class="forward">
				<uni-icons type="forward" size="20"></uni-icons>
			</view>
		</view>
		<!-- 商品卡片 -->
		<view class="card" v-for="(s,i) in data" :key="i">
			<view class="image">
				<image :src="$base+s.pic" mode="widthFix"></image>
			</view>
			<view class="text">
				<text class="title">{{s.title}}</text>
				<text class="price">¥{{s.price}}</text>
				<uni-tag text="包邮到家" type="warning" />
			</view>
			<view class="count">
				<text>×1</text>
			</view>
		</view>
		<!-- 支付方式 -->
		<radio-group name="radio">
			<view class="pay-list">
				<uni-list>
					<uni-list-item>
						<template v-slot:body>
							<label @click="ZhiFu(1)">
								<radio value="wx" color="#a397fd"/>
								<text >微信支付</text>
								<image src="../../static/tabbar/wx.png" mode="widthFix"></image>
							</label>
						</template>
					</uni-list-item>

					<uni-list-item>
						<template v-slot:body>
							<label @click="ZhiFu(2)">
								<radio value="zfb" color="#a397fd"/>
								<text >支付宝支付</text>
								<image src="../../static/tabbar/zfb.png" mode="widthFix"></image>
							</label>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</radio-group>
		<!-- 结算按钮 -->
		<view class="place">
			<view class="text">
				<p>合计:</p>
				<span>¥{{data.price}}</span>
			</view>
			<!-- <tui-keyboard :show="true" @close="closeKeyboard" @click="keyboardClick" action> -->
			<view class="tui-digital-box">
				<!-- <button @click="goto('/pages/paysuc/paysuc')">提交订单</button> -->
				<button @click="gopaysuc">提交订单</button>
				<!-- <tui-keyboard-input :inputvalue="pwdArr"></tui-keyboard-input> -->
			</view>
			</tui-keyboard>
		</view>
	</view>
</template>

<script>
	import {orderadd,shopAdress,xhaAddress} from '@/service/index.js'
	export default {
		data() {
			return {
				zhifu:2,
				show: true,
				data:this.$route.query,
				time:'',
				adress:'',
				id:''
			}
		},
		async onLoad(e) {
			
			//获取当前时间
			this.time = this.getTime();
			//获取当前用户收货地址
			let res=await shopAdress(this.$uid)
			// console.log(res,'res')
			this.adress=res.result[0]
			// console.log(this.$id)
			this.id=this.$id
	        if(this.id!==''){
				let ress=await xhaAddress(this.$uid,this.id)
					this.adress=ress.result[0]
				// console.log(ress.result[0])
				// console.log(`${this.adress.province}${this.adress.diqutel}${this.adress.county}`)
				
			}else{
				uni.showToast({
					title:'请刷新后提交'
				})
			}	
		},
		methods: {
			//获取当前时间
			getTime:function(){
						var date = new Date(),
						year = date.getFullYear(),
						month = date.getMonth() + 1,
						day = date.getDate(),
						hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
						minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
						second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
						month >= 1 && month <= 9 ? (month = "0" + month) : "";
						day >= 0 && day <= 9 ? (day = "0" + day) : "";
						var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
						return timer;
					},
			ZhiFu(pid){
				this.zhifu=pid
			},	
			gowhere(url){
				uni.navigateTo({
					url:url
				})
			},
					
					
					
		async gopaysuc() {
					uni.navigateTo({
						url:'/pages/paysuc/paysuc'
					})
			},

		}
	}
</script>

<style lang="scss">
	
	.pay .card[data-v-58c126c8]{
		               padding-top: -100px !important;
				    padding: 0px 20px !important;
					// border: 1px solid red;
					margin-bottom: 100px !important;
			}
	.uni-label-pointer{
		display: flex !important;
		justify-content: space-between !important;
		
	}
	.pay {
		.rece {
			padding: 20rpx 10rpx;
			display: flex;
			align-items: center;
			border-bottom: 2px dashed #7d7d7d;
			.forward {
				flex: 1;
				.uni-icons[data-v-a2e81f6e] {
					text-align: right !important;
				}
			}
			text {
				display: block;
				margin-left: 20rpx;
				font-size: 14px;
			}
		}
		.card {
			position: relative;
			padding: 40rpx;
			display: flex;
	
			.image {
				width: 200rpx;
				image {
					width: 100%;
				}
			}
			.text {
				display: flex;
				width: 60%;
				flex-direction: column;
				.title {
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 10%;
				}
				.price {
					display: block;
					color: #a397fd;
					font-weight: bold;
					margin-bottom: 3%;
				}
				.uni-tag--warning[data-v-1516016e] {
					width: 30% !important;
					text-align: center;
				}
			}
			.count {
				font-weight: bold;
				font-size: 16px;
				position: absolute;
				bottom: 30px;
				right: 30px;
			}
		}
		.pay-list {
			    height: 100px;
			    width: 100%;
			    position: fixed;
			    bottom: 0;
				margin-top: 100px;
			image{
				width: 50rpx;
				position: absolute;
				right: 30px;
			}
		}
		.place {
			display: flex;
			align-items: center;
			.text {
				position: fixed;
				bottom: 15px;
				right: 120px;

				p {
					display: inline-block;
					margin-right: 5px;
				}
				span {
					color: #a397fd;
					font-weight: bold;
				}
			}
			button {
				position: fixed;
				bottom: 10px;
				right: 10px;
				border-radius: 50rpx;
				background-color: #a397fd;
				color: white;
				padding: 0 40rpx;
				font-size: 14px;
			}
		}
	}
</style>
